<template>
  <div class="vueCollapse">
    <el-button @click="switchCatalog" class="title" v-if="title">
      <i :class="isOpen ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i
      >{{ title }}
    </el-button>
    <transition name="fade">
      <div class="content" :class="direction||''" v-show="isOpen">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "vueCollapse",
  data(){
    return {
      isOpen: true,
    }
  },
  props: ["open", "title", "direction","rightIndex"],
  mounted() {
    this.$nextTick(()=>{
      this.isOpen = this.open;
    })
  },
  methods: {
    switchCatalog() { 
      this.isOpen = !this.isOpen;
       this.$emit("switchCollapse",{
         rightIndex: this.rightIndex,
         open: this.isOpen
       });
    },
  },
  computed: mapState(["decorate"]),
};
</script>

<style scoped lang="scss">
.vueCollapse {
  .title {
    width: auto;
    display: flex;
    justify-content: flex-start;
    border: none;
    background-color: transparent;font-weight: bold;
  }
  .content {
    padding: 10px 0px 10px 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    &.column{flex-direction: column;}
  }
}
</style>
<style lang="scss">
.vueCollapse {
  .title {
    &:hover {
      background-color: transparent;
    }
    i {
      transition: all 0.3s;
    }
  }
}
</style>
